
<template>
  <el-dialog :title="title" v-model="visible" append-to-body :lock-scroll="true" center custom-class="RegularPop"
    :close-on-click-modal="false">
    <el-form :model="form" :rules="rules" ref="ruleFormRef" :inline="true">
      <h1>账号信息</h1>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactBy">
            <el-input v-model="form.contactBy" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="设置账号" prop="username">
            <el-input v-model="form.username" placeholder="请输入" autocomplete="off" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.id == undefined">
          <el-form-item label="账号密码" prop="password">
            <el-input v-model="form.password" placeholder="密码字母与数字组合，长度9-12位" autocomplete="new-password"
              type="password" maxlength="12" show-password clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="line"></div>
      <h1>客户信息</h1>
      <el-row>
        <el-col :span="12">
          <el-form-item label="租户名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入20个字以内" clearable maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="简称" prop="shortName">
            <el-input v-model="form.shortName" placeholder="请输入6个字以内" clearable maxlength="6" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="租户类型" prop="type">
            <el-select v-model="form.type" placeholder="租户类型" clearable>
              <el-option v-for="dict in tenant_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="经营地址" required>
            <areaItem @outValue="getAreaCode" ref="areaClear" :areaCode="areaCode" :isDisabled="readOnly"></areaItem>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="详细地址">
            <el-input v-model="form.address" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="域名" prop="hostName">
            <el-input v-model="form.hostName" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="照片">
            <imageUpload ref="upload" v-model="form.photo" :limit="limit" :isShowTip='true' :fileSize="0.3"
              :isdisabled="isDisabled" @UploadSuccess="UploadSuccess" @RemoveSuccess="RemoveSuccess"
              @isChange="isChange" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="信息介绍" class="describe">
          <el-input v-model="form.remark" type="textarea" show-word-limit maxlength="10000" />
        </el-form-item>
      </el-row>
      <div class="line"></div>
      <h1>订购服务</h1>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开通版本" prop="comboId">
            <el-select v-model="form.comboId" placeholder="请选择" clearable @change="onChangeCombo">
              <el-option v-for="(dict, index) in comboLists" :key="index" :label="dict" :value="index" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售人员">
            <el-input v-model="form.sales" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务时间">
            <span>{{ form.lastExpiredTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import areaItem from "../../areaItem";
import { addTenant, updateTenant, domain, getTenant } from '@/api/tenant/tenant'
import { getComboDic, calculateExpired } from '@/api/tenant/combo'
import { uploadCommon } from '@/mixins/ImageUploadMixin.js'
const { proxy } = getCurrentInstance();
const { tenant_type } = proxy.useDict("tenant_type");
const title = ref("");
const readOnly = ref(false)
const visible = ref(false);
const areaCode = ref("");
const isDisabled = ref(false)
const limit = ref(1)
// const IMGStatus = ref(0)
const comboLists = ref({})
const { UploadSuccess, RemoveSuccess, submit, formList, isChange } = uploadCommon.setup()
const data = reactive({

  form: {},
  queryParams: {},

  rules: {
    name: [{ required: true, message: "租户名称不能为空", trigger: "blur" }],
    contactPhone: [
      { required: true, message: "联系电话不能为空", trigger: "blur" },
    ],
    contactBy: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
    username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
    password: [{ required: true, message: "密码不能为空", trigger: "blur" },
    {
      pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{9,12}$/, //大小字母与数字
      message: "密码字母与数字组合，长度9-12位",
      trigger: "blur",
    }],
    shortName: [{ required: true, message: "简称不能为空", trigger: "blur" }],
    type: [{ required: true, message: "租户类型不能为空", trigger: "change" }],
    // areaCode: [{ message: "经营地址不能为空", trigger: "blur" }],
    comboId: [{ required: true, message: "版本不能为空", trigger: "change" }],
    hostName: [{ required: true, message: "域名不能为空", trigger: "blur" }]
  },
});

const { queryParams, form, rules, pickerOptions } = toRefs(data);
function getAreaCode(code) {
  console.log("code", code);
  form.value.areaCode = code;
}
//
domain().then(res => {
  // console.log('yuming==', res)
})
/** 重置操作表单 */
function reset() {
  form.value = {};
  proxy.$refs.areaClear.clearValue() //重置联动下拉条件
  proxy.resetForm("ruleFormRef");
}
// 显示弹框
function add() {
  isDisabled.value = false
  visible.value = true;
  title.value = "新增租户";
  reset();
}

function getCombos() {
  getComboDic().then(res => {
    //  console.log('套餐列表', res)
    if (res.code == 200) {
      comboLists.value = res.data
    }

  })
}
/** 取消按钮 */
function cancel() {
  reset();
  visible.value = false;

};

//
function onChangeCombo(val) {
  console.log('选中', val)
  const comboId = val
  calculateExpired(comboId).then(res => {
    if (res.code == 200) {
      form.value.lastExpiredTime = res.data[0] + ' - ' + res.data[1]
    }
  })
}
//提交
function submitForm() {
  proxy.$refs['ruleFormRef'].validate(valid => {
    if (valid) {
      if (form.value.id != undefined) {
      } else {
        submit(formList => {
          form.value.photo = formList
          addTenant(form.value).then(res => {
            proxy.$modal.msgSuccess("新增成功");
            visible.value = false;
            proxy.$emit('refresh')
          })
        })

      }
    } else {
      proxy.$modal.msgError("提交失败！");
      return false;
    }
  })
}
getCombos();
defineExpose({
  add
});
</script>
